<script setup lang="ts">
import HeaderView from '../components/HeaderView.vue'
import FooterView from '../components/FooterView.vue'
//import { useRoute } from 'vue-router';

/*const route = useRoute();
const { color, number, size } = route.query;
const goods = [{goods_id:2, size:size, color:color, number:3, price:2.50 }]*/

</script>

<template>

  <HeaderView />


  <div class="container-container-c">

    <el-breadcrumb>
      <el-breadcrumb-item :to="'/lists/' + item.id" v-for="(item, index) in cate_parent" :key="index">{{ item.title }}</el-breadcrumb-item>
      <!-- <el-breadcrumb-item>{{ goodsInfo.name }} </el-breadcrumb-item> -->
    </el-breadcrumb>



    <div class="container-container-buy">

      <div class="container-container-buy-left">
        <el-image :src="goodsInfo.pic" />
        <div class="tips">
          <div class="name">{{ goodsInfo.name }}</div>

          <div class="qty">Qty:<span>{{ number }}</span></div>
          <div class="qty" v-if="goodsInfo.attr_1_name">SIZE:<span>{{ attr_1_value }}</span></div>
          <div class="qty" v-if="goodsInfo.attr_2_name">COLOR:<span>{{ attr_2_value }}</span></div>

          <div class="prices">${{ parseFloat(goodsInfo.price * number).toFixed(2) }}</div>
        </div>
      </div>

      <div class="container-container-buy-right">
        <div class="secure"><svg t="1744973205026" class="secure-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9225" width="20" height="20"><path d="M509.8 959.6c-34.4 0-68.8-8.7-99.5-26.2L200.5 814.1C134.1 776.3 92.9 704.4 92.9 626.2V272.5c0-58.3 39.3-109.7 95.5-125.1l287.7-78.7c22.1-6 45.4-6 67.5 0l287.8 78.7c56.2 15.4 95.5 66.8 95.5 125.1v353.7c0 78.1-41.2 150.1-107.6 187.9l-210 119.3c-30.7 17.4-65.1 26.2-99.5 26.2z m0-798.6c-2.8 0-5.5 0.4-8.2 1.1l-287.7 78.7c-14.3 3.9-24.2 16.9-24.2 31.7v353.7c0 43.4 22.5 83.1 58.7 103.7l209.8 119.3c31.9 18.1 71.5 18.1 103.3 0l209.8-119.3c36.2-20.6 58.7-60.3 58.7-103.7V272.5c0-14.8-10-27.8-24.2-31.7L518 162.1c-2.6-0.7-5.4-1.1-8.2-1.1z" fill="#e62424" p-id="9226"></path><path d="M630.8 536.7H388.9c-26.7 0-48.4-21.7-48.4-48.4s21.7-48.4 48.4-48.4h241.9c26.7 0 48.4 21.7 48.4 48.4s-21.7 48.4-48.4 48.4z" fill="#e62424" p-id="9227"></path><path d="M509.8 657.6c-26.7 0-48.4-21.7-48.4-48.4V367.3c0-26.7 21.7-48.4 48.4-48.4s48.4 21.7 48.4 48.4v241.8c0 26.8-21.6 48.5-48.4 48.5z" fill="#e62424" p-id="9228"></path></svg>100% SECURE</div>


        <div class="name">Please fill in the payment information</div>

        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
          >

        <div class="tips"><svg t="1745123952846" class="tips-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9072" width="20" height="20"><path d="M791.1 957.6H233.5c-75.5 0-136.9-61.4-136.9-136.9V199.5C96.6 124 158 62.6 233.5 62.6h557.7c75.5 0 136.9 61.4 136.9 136.9v621.2c-0.1 75.5-61.5 136.9-137 136.9zM233.5 152.1c-26.1 0-47.4 21.3-47.4 47.4v621.2c0 26.1 21.3 47.4 47.4 47.4h557.7c26.1 0 47.4-21.3 47.4-47.4V199.5c0-26.1-21.3-47.4-47.4-47.4H233.5z" fill="#333333" p-id="9073"></path><path d="M457.4 702c-11.4 0-22.9-4.4-31.6-13.1L286.3 549.4c-17.5-17.5-17.5-45.8 0-63.3s45.8-17.5 63.3 0l107.8 107.8L675 376.4c17.5-17.5 45.8-17.5 63.3 0s17.5 45.8 0 63.3L489.1 688.9c-8.8 8.7-20.2 13.1-31.7 13.1z" fill="#333333" p-id="9074"></path></svg>GENERAL INFORMATION</div>


            <el-form-item label="Email" prop="email">
              <el-input
              v-model="ruleForm.email"
              placeholder="ruleForm.email"
              disabled
              />
            </el-form-item>


            <el-form-item label="Verification code" prop="code">
              <el-input
              oninput="value=value.replace(/[^\d.]/g,'')"
              maxlength="6"
              v-model="ruleForm.code"
               placeholder="Please enter Verification code"
              style="width: calc( 97% - 160px); margin-right: 3%;"
              />
              <el-button style="width: 160px;" :disabled="sendEmailDisabled" @click="getEmailCode(ruleFormRef)">{{ sendEmailMessage }}</el-button>

            </el-form-item>

            <el-form-item label="Country code" prop="areacode">


              <el-input
              v-model="ruleForm.areacode"
              placeholder="Area code"
               oninput="value=value.replace(/[^\d.]/g,'')"

              />

               </el-form-item>

            <el-form-item label="Telephone number" prop="telephone">
              <el-input
              v-model="ruleForm.telephone"
              placeholder="Telephone telephone"
               oninput="value=value.replace(/[^\d.]/g,'')"
              />
            </el-form-item>
            <el-form-item label="address" prop="address">
                <el-input
                v-model="ruleForm.address"
                placeholder="address"
                />
              </el-form-item>

            <div class="tips"><svg t="1745208651157" class="tips-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9177" width="20" height="20"><path d="M823.1 880H202.6c-74.5 0-135.1-60.6-135.1-135V412.7c0-24.6 19.9-44.5 44.5-44.5h801.6c24.6 0 44.5 19.9 44.5 44.5V745c0.1 74.4-60.5 135-135 135zM156.6 457.2V745c0 25.3 20.6 46 46 46h620.6c25.4 0 46-20.6 46-46V457.2H156.6z" fill="#333333" p-id="9178"></path><path d="M913.6 457.2H112.1c-24.6 0-44.5-19.9-44.5-44.5v-130c0-74.5 60.6-135 135.1-135h620.6c74.5 0 135 60.6 135 135v130c-0.1 24.6-20.1 44.5-44.7 44.5z m-757-89h712.5v-85.5c0-25.4-20.6-46-46-46H202.6c-25.4 0-46 20.6-46 46v85.5zM756.5 721.4H654c-24.6 0-44.5-19.9-44.5-44.5s19.9-44.5 44.5-44.5h102.5c24.6 0 44.5 19.9 44.5 44.5s-19.9 44.5-44.5 44.5z" fill="#333333" p-id="9179"></path></svg>PAYMENT INFORMATION</div>


          <el-form-item label="Cardholder Name" prop="card_name">
              <el-input
              v-model="ruleForm.card_name"
              placeholder="Please enter Cardholder Name"
              />
            </el-form-item>

            <el-form-item label="Card Number" prop="cardnumber">
              <el-input
              v-model="ruleForm.cardnumber"
              placeholder="Please enter Card Number"
              />
            </el-form-item>

            <el-form-item label="Expiration Date" prop="time">
              <el-date-picker
                v-model="ruleForm.time"
                type="month"
                placeholder="Please enter MM/YY"
              />
              </el-form-item>

              <el-form-item label="CVV/CVC" prop="cvvcvc">
              <el-input
              v-model="ruleForm.cvvcvc"
              placeholder="Please enter CVV or CVC"
              />
              </el-form-item>

              <div class="center-button">
              <el-form-item  style="margin-bottom: 0;">
                <el-button type="primary" @click="submitForm(ruleFormRef)">SUBMIT</el-button>
              </el-form-item>
              </div>

        </el-form>

      </div>
    </div>

  </div>

  <FooterView class="footer" />

</template>

<script lang="ts">

import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElLoading, ElNotification, type LoadingOptions } from 'element-plus'
import createAxios from '../utils/axios'
import { useUserInfo } from '../stores/userInfo'

const userInfo = useUserInfo()



interface RuleForm {
  code: string
  areacode: string
  address:string
  telephone: string
  card_name: string
  time: string
  cardnumber: string
  cvvcvc: string
  goods:{}
}


const ruleFormRef = ref<FormInstance>()

const ruleForm = reactive<RuleForm>({
  code:'',
  areacode: '',
  address:'',
  telephone:'',
  card_name: '',
  cardnumber:'',
  time: '',
  cvvcvc: '',
  goods:{}
})



const sendEmailDisabled = ref(false);
const sendEmailMessage = ref('Get verification code');
const rules = reactive<FormRules<RuleForm>>({
 code: [
    { required: true, message: 'Please enter email verification code', trigger: 'blur' },
    { min:4, max:4, message: 'Verification Code must be a number', trigger: 'blur' }
  ],
  areacode: [
    { required: true, message: 'Area code', trigger: 'change' },
  ],
  telephone: [
    { required: true, message: 'Please enter International area code and telephone number', trigger: 'blur' },
  ],
  address: [
    { required: true, message: 'Please enter Cardholder address', trigger: 'blur' },
  ],
  card_name: [
    { required: true, message: 'Please enter Cardholder Name', trigger: 'blur' },
  ],
  cardnumber: [
    { required: true, message: 'Please enter Card Number', trigger: 'blur' },
  ],
  time: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  cvvcvc: [
    { required: true, message: 'Please enter CVV or CVC', trigger: 'blur' },
  ]

})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return

  // 组合
  //ruleForm.goods_id = this.$route.params.goods_id
  // const goods = [{goods_id:2, size:size, color:color, number:number, price:2.50 }]
  // ruleForm.goods = this.size
  console.log(ruleForm.goods)

  await formEl.validate((valid) => {
    if (valid) {
      //window.location.href = '/Result';
      // 请求接口
      createAxios({
            url: '/frontend/profile/add-order',
            data: ruleForm,
            method: 'post',
        },{showSuccessMessage: true,})
        .then((res) => {
            // 设置缓存
            console.log('token', res.data)
            setTimeout(function(){ window.location.href = '/Result';},1000)
        })
        .finally(() => {
        })
    }
  })
}


// 获取邮件验证码
const getEmailCode = async (formEl: FormInstance | undefined) =>{
  //const email = userInfo.getUser().email
  const email = ruleForm.email
  if(!email){
    ElNotification({
        type: 'error',
        message:'Please input correct email address',
        zIndex: 9999,
    })
    return
  }

  // 不可用
  if (sendEmailDisabled.value){
    return;
  }
  sendEmailDisabled.value = true
  sendEmailMessage.value = 'Try again in 2 minutes'
  setTimeout(function(){
    sendEmailDisabled.value = false
    sendEmailMessage.value = 'Get verification code'
  },2*60*1000)

  // 发送验证码
  createAxios({
        url: '/frontend/account/send-email',
         data: {email:email,is_reg:0},
        method: 'post',
    },{showSuccessMessage: true,})
    .then((res) => {
        // 设置缓存
        console.log('token', res.data)
    })
    .finally(() => {
    })
}

export default {
  data() {
    return {
      pageTitle: 'Buying - Versace Jeans Couture',
      goodsInfo: {},
      cate_parent: [],
      number:1,
      color:'',
      size:'',
      sendEmailDisabled:false,
    };
  },
  created() {
    this.updateTitle();
    this.fetchGoodInfos(this.$route.params.goods_id);

  },
    watch:{
      // 监听路由变化，处理参数更新
      '$route.params.id'(newId, oldId) {
        console.log(newId, oldId)
        this.fetchGoodInfos(newId)
      }
  },
  computed: {

    /*formData() {
      return this.$store.state.formData;
    }*/
  },
  mounted() {
    // 如果 store 中没有数据，则请求接口
    // if (Object.keys(this.formData).length === 0) {
    //   this.$store.dispatch('fetchFormData');
    // }

    setTimeout(function(){
      if(!userInfo.getUser()){
        window.location.href = '/Signin'
      }
    },1000)

  },
  methods: {
    updateTitle() {
      document.title = this.pageTitle; // 或者根据需要动态设置标题
    },
    // 获取商品信息
    fetchGoodInfos(goods_id){
      this.attr_1_value = this.$route.query.attr_1_value
      this.attr_2_value = this.$route.query.attr_2_value
      this.number = this.$route.query.number
      //const goods = [{goods_id:2, size:size, color:color, number:3, price:2.50 }]
      //console.log('dddddddddd', this.$route.query)

      createAxios({
        url: '/frontend/goods/show',
        method: 'post',
        data: {id: goods_id},
        })
        .then((res) => {
            console.log('商品详情请求结果', res)
            this.goodsInfo = res.data
            this.cate_parent = res.data.cate_parent

            // 配置页面表单数据
            //ruleForm.goods[res.data.id] = 1
            ruleForm.goods = [{goods_id:res.data.id, attr_1_value:this.attr_1_value, attr_2_value:this.attr_2_value, number:this.number, price:res.data.price }]

            ruleForm.email = userInfo.getUser().email
            ruleForm.areacode = userInfo.getUser().country===0 ? '' : '+'+userInfo.getUser().country
            ruleForm.telephone = userInfo.getUser().mobile
            ruleForm.address = userInfo.getUser().address
            ruleForm.card_name = userInfo.getUser().card_name
            ruleForm.cardnumber = userInfo.getUser().card_number
            ruleForm.time = userInfo.getUser().card_date_date
            ruleForm.cvvcvc = userInfo.getUser().cvcv

        })
        .catch(() => {
        })
    },
  }

}


</script>

<style>

	.container-container-c {
    min-width: 1000px;
		padding: 0 5%;
    margin: 0 auto 0 auto;
    max-width: 1520px;
    margin-top: 170px;
    
	}

:root {
    --el-component-size:46px;
  }
.el-form-item__label {
  height: 46px !important;
  line-height: 46px !important;
}
.el-select__wrapper {
  height: 46px;
  line-height: 46px;
}
.el-button {
      height: 46px;
      line-height: 46px;
      border: 1px solid #e62424;
      background-color: #e62424;
      color: #ffffff;
    }
    .el-button:hover {
      border: 1px solid #e62424;
      background-color: #e62424;
      color: #ffffff;
    }
.el-form-item__error {
  color: #e62424;
  line-height: 1.6;
}
.el-form-item {
  margin-bottom: 26px;
}

.container-container-buy {
  margin-bottom: 30px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 30px;
  .container-container-buy-left {


    width: 500px;
    .el-image {
      overflow:initial;
      display: contents;
    }
    .el-image img {
      width: 200px;
    }
    .tips {
      padding: 18px 0 0 0;
    }
    .name {
      font-size: 18px;
      font-weight: 600;
      line-height: 1.6;
    }
    .qty {
      padding: 20px 0 10px 0;
      color: #666;
      border-bottom: 1px solid #f1f1f1;
      span {
        padding-left: 6px;
        color: #e62424;
        font-weight: 600;
       }
    }
    .prices {
      padding-top: 20px;
      text-align: right;
      background-image: linear-gradient(to right, #f41cb2, #f25511) !important;
      -webkit-background-clip: text !important;
      color: transparent !important;
      display:inline-block;
      font-size: 20px;
      font-weight: 600;
    }
  }

  .container-container-buy-right {
    width: calc(100% - 500px );
    border-left: 1px solid #f1f1f1;
    margin-left: 5%;
    padding-left: 50px;
    min-height: 600px;
    .secure {
        padding: 0 0 10px 0;
        line-height: 20px;
        display: flex;
        color: #e62424;
        font-weight: 700;
        .secure-icon {
          margin:0 6px 0 0;
        }
      }
    .name {
      font-size: 14px;
    }
    .tips {
      margin-top: 40px;
      font-size: 16px;
      color: #000;
      display: flex;
      font-weight: 700;
      line-height: 20px;
      padding-bottom: 20px;
      .tips-icon {
          margin:0 6px 0 0;
        }
    }
    .center-button {
      padding: 20px 0 20px 0;
      .el-button {
        height: 60px;
        padding: 10px 110px;
        line-height: 60px;
        margin: 0 auto;
        font-size: 16px;
        font-weight: 700;
         border: 0;
        background-image: linear-gradient(to right, #f41cb2, #f25511);
      }
      .el-button:hover {
        background-image: linear-gradient(to right, #d41b9d, #f25511);
        color: #fff;
      }

    }
  }
}


@media only screen and (max-width: 1000px) {
  body {
    overflow: auto !important;
  }
  .container-container-c {
    max-width: 90%;
        min-width: 90%;
        width: 90%;
        margin-top: 100px;
        padding: 0 0 0 0;
  }
  .el-form-item__label {
  height: 36px !important;
  line-height: 36px !important;
  font-size: 16px;
  }
  .el-form-item {
    display: block;
    margin-bottom: 20px;
  }
  .el-form-item__label-wrap {
    margin: 0 !important;
  }
  .container-container-buy  {
    .container-container-buy-left {
      display: none;
    }
    .container-container-buy-right {
      width: 100%;
      border: 0;
      margin: 0;
      padding: 0;
      .secure {
        background-color: #ffebeb;
        padding: 12px;
        margin-bottom: 20px;
      }
      .center-button {

        width: 100%;


        .el-button {
        width: 100%;
      }
      }

    }
  }
  .center-button  {
    padding-top: 0 !important;
  }

  .footer {
    display: none;
  }

}
</style>
